<template>
	<view class="wrap">
		<!-- tar栏 -->
		<view>
			<zb-tab @click-tab='changeTab' :activeStyle="{
			    fontWeight: 'bold',
			    transform: 'scale(1.1)'
			    }" :data="tabList" v-model="active"></zb-tab>
		</view>
		<!-- 内容区 -->
		<view class="content-wrap">
			<view v-if="isShow == 1" class="content-top">
				<swiper class="uni-swiper-wrapper" :indicator-dots='false' circular autoplay interval=3000>
					<swiper-item v-for="(item,index) in imgList" class="swiper-item" :key="index">
						<image :src="item.imgsrc"></image>
						<view class="img-text">{{ item.title}}</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="content-middle">
				<view class="content-item" @click="getNewDetails(news.url)" v-for="(news,index) in newsList"
					:key="news.docid + index">
					<view class="content-dis">
						<text>{{news.title}}</text>
						<text>{{news.source}}</text>
						<text>{{news.lmodify}}</text>
					</view>
					<view class="content-img">
						<image :src="news.imgsrc" alt="" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		mounted() {
			this.active = uni.getStorageSync('tabIndex') || 0;
			switch (this.active) {
				case 0:
					this.headline()
					break;
				case 1:
					this.recreation()
					break;
				case 2:
					this.sports()
					break;
			}
		},
		data() {
			return {
				isShow: 1,
				imgList: [],
				active: 0,
				newsList: [],
				tabList: [{
					name: '头条',
					value: 0,
				}, {
					name: '娱乐',
					value: 1,
				}, {
					name: '运动',
					value: 2,
				}]
			}
		},
		methods: {
			getNewDetails(url) {
				if (url) {
					uni.navigateTo({
						url: `/pages/webview/webview?url=${url}`
					})
					return
				}
				uni.navigateTo({
					url: '/pages/newsDetails/newsDetails'
				})
			},
			changeTab(e) {
				const {
					value
				} = e;
				uni.setStorageSync('tabIndex', value);
				switch (value) {
					case 0:
						this.headline();
						break;
					case 1:
						this.recreation();
						break;
					case 2:
						this.sports();
						break;
				};
			},
			async headline() {
				this.isShow = 1;
				let res = await uni.request({
					method: 'GET',
					url: 'https://c.m.163.com/nc/article/headline/T1348647853363/0-10.html'
				});
				const {
					T1348647853363
				} = res.data;
				this.newsList = res.data.T1348647853363;
				this.imgList = T1348647853363[0].ads;
			},
			async recreation() {
				this.isShow = 1;
				let res = await uni.request({
					method: 'GET',
					url: 'http://c.3g.163.com/nc/article/list/T1348648517839/0-10.html'
				});
				const {
					T1348648517839
				} = res.data;
				this.newsList = res.data.T1348648517839;
				this.imgList = T1348648517839[0].ads;
			},
			async sports() {
				this.isShow = 0;
				let res = await uni.request({
					method: 'GET',
					url: 'http://c.3g.163.com/nc/article/list/T1348649079062/0-10.html'
				});
				const {
					T1348649079062
				} = res.data;
				this.newsList = res.data.T1348649079062;
				this.imgList = T1348649079062[0].ads;
			}
		}
	}
</script>
<style lang="scss" scoped>
	/* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
	.y-tab-virtual {
		position: relative;
		flex-shrink: 0;
		width: 100%;
	}

	.wrap {
		.content-wrap {
			.content-top {
				.uni-swiper-wrapper {
					width: 100%;
					height: 400rpx;

					.swiper-item {
						position: relative;

						image {
							width: 100%;
							height: 100%;
						}

						.img-text {
							padding-left: 1rpx;
							width: 100%;
							background-color: rgba(224, 255, 255, 0.5);
							position: absolute;
							top: 89%;
							font-size: 18px;
							color: black;
						}
					}

				}
			}

			.content-middle {
				margin-top: 20rpx;

				.content-item {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					padding: 10rpx 20rpx;
					border-radius: 40rpx;
					margin-top: 10rpx;
					box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;

					.content-dis {
						width: 70%;

						text {
							display: block;
						}

						& text:nth-child(2) {
							margin-top: 30rpx;
							color: grey;

						}

						& text:nth-child(3) {
							color: grey;
						}
					}

					.content-img {
						width: 30%;

						image {
							width: 100%;
							height: 200rpx;
							border-radius: 20rpx;
						}

					}
				}
			}
		}
	}
</style>